<template>
	<view class="btn-bg" v-if="details.type" :style="{ paddingBottom: tabbarBottom + 'px' }">
		<view class="container" v-if="details.type != 4" style="padding-bottom: 12rpx !important;">
			<view class="left">
				<view class="shop shop-index" @click="store(details.shopId)">
					<image src="/static/seller.png" class="icon"></image>
					<view class="title">商家主页</view>
				</view>
				<view class="shop num-wrapper" @click="cart">
					<image src="/static/details_cart.png" style="width: 38rpx;" class="icon"></image>
					<view class="title">购物车</view>
					<view v-show="totalNum>0" class="num">{{totalNum}}</view>
					
				</view>
			</view>
			<view class="btn-wrapper" v-if="details.productCount == 0">
				<view class="btn off">库存不足</view>
			</view>
			<view class="btn-wrapper" v-if="details.productCount != 0">
				<view class="btn yello" @click="handleAddProduct">加入购物车</view>
				<view class="btn oran" @click="confirmOrder(1,1)">立即购买</view>
			</view>
		</view>
		<view class="container" v-if="details.type == 4" style="padding-bottom: 12rpx !important;">
			<view class="shop shop-index" style="padding-left: 26rpx;" @click="store(details.shopId)">
				<image src="/static/seller.png" class="icon"></image>
				<view class="title">商家主页</view>
			</view>
			<view class="book" @click="confirmOrder(1,2)">预约</view>
		</view>
	</view>
</template>

<script>
	import { addProduct } from '@/api/order.js'
	import {
		memberCarItems
	} from '@/api/order.js';
	export default {
		props: {
			details: {
				type: Object,
				value: {},
				cartFlag: false
			}
		},
		data() {
			return {
				totalNum:0,
				tabbarBottom: 0,
				shopId: undefined
			}
		},
		computed: {},
		mounted() {
			const fixSize = () => {
				const {
					safeAreaInsets,
					platform
				} = uni.getSystemInfoSync()
				
				
				console.log(uni.getSystemInfoSync())
				let barpx = 0
				if (safeAreaInsets && safeAreaInsets.bottom) {
					if (safeAreaInsets.bottom > 0) {
						barpx = safeAreaInsets.bottom
					} else {
						barpx = 0
					}
				}
				if(platform == "devtools"){
				    this.tabbarBottom = barpx || 6
				}else if(platform == "ios"){
					this.tabbarBottom = barpx || 30
				}else if(platform == "android"){
					this.tabbarBottom = barpx || 30
				}
				
			}
			
			
			fixSize()
		},
		
		methods: {
			// 加入购物车
			handleAddProduct() {
				const {productCount, id} = this.details
				const data = {
					num: productCount,
					productId: id
				}
				if (this.cartFlag) {
					return
				}
				this.cartFlag = true
				addProduct(data).then(respanse => {
					
				  this.getCartList(this.shopId);
				  uni.showToast({
				  	title: '加入成功！',
				  	icon: 'success',
				  	duration: 2000
				  })
				  this.cartFlag = false
				}).catch(err => {
					this.cartFlag = false
				})
			},
			
			getCartList(shopId){
				this.shopId = shopId;
				memberCarItems({type:this.details.type,shopId:this.shopId}).then(respanse => {
					let count = 0;
					let amount = 0;
					if(respanse.result.length>0){
						let cartProducts = 	respanse.result[0].details;
						for (let j = 0; j < cartProducts.length; j++) {
							count += cartProducts[j].num;
							
						}
						this.totalNum = count;
					}else{
						this.totalNum = 0;
						
					}
					
				});
			},

			confirmOrder(buyType,num) {
				//  buyType 1立即购买 2购物车
				uni.navigateTo({
					url: `/pages/order/confirm-order?buyType=${buyType}&productDetails=${encodeURIComponent(JSON.stringify(this.details))}&loginType=${num}`
				})
			},
			
			store(id) {
				if (id == 0) {
					uni.reLaunch({
					    url: '/pages/special-price-mall/index'
					})
				} else {
					uni.reLaunch({
						url: `/pages/store/index?shopId=${id}`
					})
				}
			},
			
			cart() {
				if (this.details.type == 3) {
					uni.navigateTo({
					    url: `/pages/store/supermarket?shopId=${this.details.shopId}`
					})
				} else {
					uni.reLaunch({
					    url: '/pages/cart/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-bg {
		background-color: #fff;
	}
	.container {
		display: flex;
		justify-content: space-between;
		padding: 12rpx 16rpx;
		background-color: #fff;
		.left{
			display: flex;
			padding-left: 26rpx;
		}
		.shop-index {
			width: 82rpx !important;
		}
		.shop {
			margin-right: 40rpx;
			width: 62rpx;
			.icon {
				display: block;
				margin: 11rpx auto;
				width: 32rpx;
				height: 33rpx;
			}
			

			.title {
				margin-top: 7rpx;
				line-height: 30rpx;
				text-align: center;
				font-size: 20rpx;
				color: #999999;
			}
		}
		.num-wrapper {
					position: relative;

		.num {
				position: absolute;
				right: -22rpx;
				top: 2rpx;
				min-width: 32rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				line-height: 32rpx;
				font-size: 26rpx;
				color: #fff;
				background-color: #ec5d49;
				border-radius: 16rpx;
			}
			}
		.btn-wrapper {
			display: flex;
			width: 440rpx;
			border-radius: 40rpx;
			overflow: hidden;

			.btn {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;

				&.yello {
					background: linear-gradient(-90deg, #EB9946, #F7C75A);
				}

				&.oran {
					background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
				}
				&.off{
					background: #BCBCBC;
					color: #fff;
				}
			}
		}
	}

	.book {
		width: 220rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		background: linear-gradient(-90deg, #ED602B, #F19136);
		border-radius: 40rpx;
	}
	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
		.container{
			padding-bottom: env(safe-area-inset-bottom) !important;
			padding-bottom: constant(safe-area-inset-bottom) !important;
		}
	}
</style>
